<!-- 订单商品详情 -->
<!-- yb 2023年4月5日 9:22 -->
<template>
    <div class="divv">
      <div class="div1">
        <div v-for="(item) in InformationData" :key="item.id">
          <!-- 订单完成度 -->
          <div class="div2">
              <div class="div2-1">
                  <div class="div2-2">
                      <p style="color: #999; font-size: 12px;text-align: center;">订单号：{{ item.orderNumber }}</p>
                      <p v-if="StepListData.id == 1" style="color: #71b247; font-size: 26px;text-align: center;font-weight: 600;">待付款</p>
                      <p v-if="StepListData.id == 2" style="color: #71b247; font-size: 26px;text-align: center;font-weight: 600;">商品出库</p>
                      <p v-if="StepListData.id == 3" style="color: #71b247; font-size: 26px;text-align: center;font-weight: 600;">等待收货</p>
                      <p v-if="StepListData.id == 4 || StepListData.id == 9" style="color: #71b247; font-size: 26px;text-align: center;font-weight: 600;">完成</p>
                      <!-- <el-button type="danger" plain style="float: left;margin-left: 15px; margin-top: 10px; width: 110px;height: 35px;">评价</el-button> -->
                  </div>
              </div>
              <div class="div2-3">
                  <p style="color: #999; font-size: 13px;text-align: center;">订单已经完成，感谢您在京东商城购物，欢迎您对本次交易及所购商品进行评价。</p>
                  <el-steps :active="StepListData.id" align-center finish-status="success" style=" float:left; margin-top:75px; width: 850px; ">
                      <el-step title="提交订单" :description="StepListData.createTime"></el-step>
                      <el-step title="付款成功" description=""></el-step>
                      <el-step title="商品出库" :description="StepListData.createTime"></el-step>
                      <el-step title="等待收货" description=""></el-step>
                      <el-step title="完成" description=""></el-step>
                  </el-steps>
              </div>
          </div>
          <!-- 订单快递 -->
          <!-- <div class="div2">
              <div class="div2-1">
                  <div class="div2-4">
                      <el-image  style="width: 100px; height: 100px;float: left;" :src='`http://101.43.223.224:8765/image/getImageById?id=${InformationData.imageId}`'></el-image>
                      <p style="font-size: 13px; float: left; margin-left: 10px;margin-top: 5px;">送货方式：京东快递</p>
                      <p style="font-size: 13px; float: left; margin-left: 10px;margin-top: 0px;">承运人：京东快递快递咨询</p>
                      <p style="font-size: 13px; float: left; margin-left: 10px;margin-top: 0px;">货运单号：JD0100058566246</p>
                  </div>
              </div>
               快递信息预留 
              <div class="div2-3">
                  
              </div>
          </div> -->
          <!-- 订单收货人信息 -->
          <div class="div2">
              <div class="div2-5">
                  <p style="font-size: 16px; float: left; margin-left: 20px;margin-top: 15px; width: 100%;"> 收货人信息</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 5px; width: 100%;">收货人：{{ item.addressConsignee }}</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 0px;width: 100%;">地址：{{ item.address }}</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 0px;width: 100%;">手机号码：{{ item.addressTelephoneShift }}</p>
              </div>
              <!-- <div class="div2-5">
                  <p style="font-size: 16px; float: left; margin-left: 20px;margin-top: 15px; width: 100%;"> 配送信息</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 5px; width: 100%;">配送方式：京东快递</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 0px;width: 100%;">期望送货日期：2023-03-16</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 0px;width: 100%;">期望配送时间：09:00-15:00</p>
              </div> -->
              <div class="div2-5" style="border: 0px;">
                  <p style="font-size: 16px; float: left; margin-left: 20px;margin-top: 15px; width: 100%;"> 付款信息</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 5px; width: 100%;">付款方式：{{ item.mode }}</p>
                  <p style="font-size: 13px; float: left; margin-left: 20px;margin-top: 0px;width: 100%;">付款时间：{{ item.createTime }}</p>
              </div>
          </div>
          <p style="font-size: 14px; float: left; margin-left: 20px;margin-top: 10px;width: 100%;">麦凯松旗舰店</p>
          <!-- 订单信息 -->
          <div class="div3">
              <div class="div3-1">
                  <p style="float:left; margin-left: 200px; line-height: 4px; font-size: 15px;">商品</p>
                  <p style="float:left; margin-left: 320px; line-height: 4px; font-size: 15px;">商品编号</p>
                  <p style="float:left; margin-left: 115px; line-height: 4px; font-size: 15px;">京东价</p>
                  <p style="float:left; margin-left: 100px; line-height: 4px; font-size: 15px;">商品数量</p>
                  <p style="float:left; margin-left: 130px; line-height: 4px; font-size: 15px;">操作</p>
              </div>
              <div class="div3-7">
                    <div  v-for="(itemw,index) in item.commodityList" :key="index" >
                        <div class="div3-2">
                            <el-image  style="width: 80px; height: 80px;float: left;margin-top: 10px;" :src="`http://101.43.223.224:8765/image/getImageById?id=${itemw.imageId.split(',')[1]}`"></el-image>
                            <p style="font-size: 13px; float: right; margin-right:-85px;margin-top: 20px; width: 100%;">{{ itemw.commodityName }}</p>
                        </div>
                        <div class="div3-3">
                            <p style="float:left; margin-left: 5px; line-height: 20px; font-size: 15px;">{{ itemw.orderNumber }}</p>
                        </div>
                        <div class="div3-4">
                            <p style="float:left; margin-left: 30px; line-height: 20px; font-size: 15px;">¥{{ itemw.orderAmountTotal }}</p>
                        </div>
                        <div class="div3-5">
                            <p style="float:left; margin-left: 50px; line-height: 20px; font-size: 15px;">{{ itemw.commodityQuantity }}</p>
                        </div>
                    </div>
                  <div class="div3-6">
                      <p v-if=" StepListData.id == 9" style="float: left;text-align: center; width: 100%;margin-top: 24px; text-decoration: none; cursor:pointer; "  @click="OrdersAppraise(item)">评价|晒单</p>
                          <el-button  v-if=" StepListData.id == 9" @click="PageMain1(item)" icon="el-icon-goods" style="width:110px; height: 35px; text-align: center; line-height: 15px; float: left; margin-left: 60px;margin-top: 8px;" >
                          立即购买</el-button>
                  </div>
              </div>
              <div class="div3-8">
                  <p style="font-size: 13px; width: 100%; float: left; margin-top: 10px;">商品总额：<span style="float: right;">¥{{ item.orderAmountTotal }}</span></p>
                  <p style="font-size: 13px; width: 100%; float: left; margin-top: 10px;">运费：<span style="float: right;">¥{{ item.freight }}</span></p>
                  <p style="font-size: 13px; width: 100%; float: left; margin-top: 10px; color: red;">实付款：<span style="float: right;font-size: 18px; font-weight: 600;">¥{{ item.orderAmountTotal }}</span></p>
              </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
      data () {
          return {
              // 图片路径
              src:'',
              // 订单信息列表数据
              InformationData: [],
              //获取用户id
              userId: '',
              //获取商品id
              Commodityid: '',
              //获取状态
              StepListData: []
          }
      },
      mounted () {
        //获取用户id
          this.userId = this.$route.query.userId
          //获取商品id
          this.Coid = this.$route.query.Coid
          this.getInformation()
          this.getStepList()
      },
      methods: {
        // 跳转到商品页面
        PageMain1 (item) {
            this.$router.push({name:'PageMain', query:{id:item.commodityList[0].commodityId}})
        },
        // 跳转到评价页面
        OrdersAppraise (item) {
            this.$router.push({name:'OrdersAppraise', query:{id:item.id,orderNumber:item.orderNumber,orderAmountTotal:item.orderAmountTotal,imageId:item.commodityList[0].imageId,commodityName:item.commodityList[0].commodityName,Commodityid:item.commodityList[0].commodityId}})
        },
          // 查询用户订单步骤详情信息
          getStepList () {
              this.$axios.get("/order/getStepList", {
                  params: {
                      userId: this.userId,
                      id: this.Coid
                  }
              }).then(res => {
                  if (res.data.flag){
                      this.StepListData= res.data.data
                  }
              }).catch(() => {
                  this.$message.error('获取信息失败！')
              })
          },
          // 订单信息列表数据
          getInformation () {
              this.$axios.get("/order/getInformation", {
                  params: {
                      userId: this.userId,
                      id: this.Coid
                  }
              }).then(res => {
                  if (res.data.flag){
                      this.InformationData= res.data.data
                  }
              }).catch(() => {
                  this.$message.error('获取信息失败！')
              })
          },
          // 消息提示框
      message (message, type) {
          this.$message({
          message: message,
          type: type
          })
      }
      }
  }
  </script>
  
  <style scoped>
  .divv{
      width: 100%;
      height: 100%;
      background: #ebebeb;
  }
  .div1{
      width: 1200px;
      height: 100%;
      margin: auto;
      
  }
  .div2{
      width: 100%;
      height: 314px;
      margin-top: 40px;
      background-color: #ffffff;
  }
  .div2-1{
      width: 330px;
      height: 100%;
      float: left;
      /* background: #ffffff; */
      border-right: 1px solid #d1d0d0;
  }
  .div2-2{
      width: 240px;
      height: 230px;
      float: left;
      margin-top: 50px;
      margin-left: 40px;
  }
  .div2-3{
      width: 868px;
      height: 100%;
      float: right;
  }
  .div2-4{
      width: 298px;
      height: 109px;
      float: left;
      margin-top: 40px;
      margin-left: 15px;
  }
  .div2-5{
      width: 399px;
      height: 100%;
      float: left;
      border-right: 1px solid #d1d0d0;
  }
  .div3{
      width: 100%;
      height: 314px;
      margin-top: 40px;
      background-color: #ffffff;
  }
  .div3-1{
      width: 100%;
      height: 35px;
      background: #FFF200  ;
  }
  .div3-7{
      width: 100%;
      height: 110px;
      border-block: 1px solid #d1d0d0;
  }
  .div3-2{
      width: 400px;
      height: 110px;
      float: left;
      margin-left: 15px;
  }
  .div3-3{
      width: 280px;
      height: 110px;
      float: left;
  }
  .div3-4{
      width: 120px;
      height: 110px;
      float: left;
  }
  .div3-5{
      width: 120px;
      height: 110px;
      margin-left: 20px;
      float: left;
  }
  .div3-6{
      width: 230px;
      height: 110px;
      margin-left: 10px;
      float: left;
  }
  .div3-8{
      width: 200px;
      height: 140px;
      float: right;
      margin-right: 10px;
      margin-top: 15px;
  }
  </style>